/*
 * @Description: 将虚拟节点上树成真实dom
 * @Author: wangqi
 * @Date: 2021-05-10 07:02:53
 * @LastEditTime: 2021-05-15 00:06:02
 */

import vnode from './vnode';
import createElement from './createElement';
import patchVnode from './patchVnode';

export default function patch(oldVnode, newVnode) {
    // 如果不是vnode,而是dom元素
    if (!oldVnode.sel) {
        // dom元素转成vnode
        oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], undefined, oldVnode);
    }
    // 如果新旧节点的sel 和 key 相同的话，则是同一个节点； 否则不是同一个
    if (oldVnode.sel == newVnode.sel && oldVnode.key == newVnode.key) {
        console.log('同一个节点，diff');
        patchVnode(oldVnode, newVnode);
    } else {
        // 不是同一个节点，需要插入 newVnode, 删除 oldVnode, 
        let newVnodeElm = createElement(newVnode);
        // 插入newVnode 到 oldVnode之前
        if (oldVnode.elm.parentNode && newVnodeElm) {
            oldVnode.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm)
        }
        // 删除 oldVnode
        oldVnode.elm.parentNode.removeChild(oldVnode.elm);
    }


};

